<template>
  <div class="wrapper">
    <!-- 头部区域 -->
    <div class="header-section">
      <div class="back-btn" @click="goBack">
        <i class="fa fa-angle-left"></i>
      </div>
      <h1 class="page-title">选择网格</h1>
      <div class="action-icon" @click="toFeedbackList">
        <i class="fa fa-bars"></i>
      </div>
    </div>

    <!-- 选择表单卡片 -->
    <section class="form-card">
      <div class="card-body">
        <!-- 省份选择 -->
        <div class="input-group">
          <span class="input-icon">
            <i class="fa fa-map-marker"></i>
          </span>
          <select
              v-model="provinceId"
              @change="changeProvince"
              class="form-control"
          >
            <option
                :value="item.provinceId"
                v-for="item in provinceArr"
                :key="item.provinceId"
            >
              {{ item.provinceName }}
            </option>
          </select>
        </div>

        <!-- 城市选择 -->
        <div class="input-group">
          <span class="input-icon">
            <i class="fa fa-map-marker"></i>
          </span>
          <select
              v-model="cityId"
              class="form-control"
          >
            <option
                :value="item.cityId"
                v-for="item in cityArr"
                :key="item.cityId"
            >
              {{ item.cityName }}
            </option>
          </select>
        </div>

        <!-- 详细地址 -->
        <div class="input-group">
          <span class="input-icon">
            <i class="fa fa-location-arrow"></i>
          </span>
          <input
              type="text"
              v-model="address"
              placeholder="具体地址"
              class="form-control"
          />
        </div>

        <!-- 操作按钮 -->
        <button class="action-btn" @click="next">
          下一步
        </button>
      </div>
    </section>

    <!-- 环保知识小百科悬浮按钮（已移到背景内部） -->
    <div
        class="eco-knowledge-btn"
        @click="openEcoKnowledge"
    >
      <i class="fa fa-leaf"></i> 环保知识
    </div>

    <!-- 环保知识弹窗 -->
    <div v-if="showEcoKnowledge" class="eco-modal">
      <div class="modal-overlay" @click="showEcoKnowledge = false"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3>环保知识小百科</h3>
          <button class="close-btn" @click="showEcoKnowledge = false">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <!-- 随机显示的环保小知识 -->
          <div class="knowledge-item" v-for="(item, index) in currentKnowledgeItems" :key="index">
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </div>

          <!-- 底部提示 -->
          <div class="tip-text">
            <p>点击悬浮按钮可查看更多环保知识</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const axios = inject("axios");

// 控制弹窗显示状态
const showEcoKnowledge = ref(false);

// 环保知识数据库（扩展了更多内容）
const ecoKnowledgeDatabase = [
  // 垃圾分类类
  {
    category: "垃圾分类",
    title: "可回收物的价值",
    content:
      "回收1吨废纸可再造出800公斤好纸，可以挽救17棵大树；回收1吨塑料饮料瓶可获得0.7吨二级原料；回收1吨废钢铁可炼好钢0.9吨。",
  },
  {
    category: "垃圾分类",
    title: "厨余垃圾的处理",
    content:
      "厨余垃圾经过处理后可以转化为有机肥料，用于农业生产。1吨厨余垃圾可生产0.3吨有机肥料，减少化肥使用量，改善土壤质量。",
  },
  {
    category: "垃圾分类",
    title: "有害垃圾的危害",
    content:
      "一节一号电池烂在地里，能使1平方米的土壤永久失去利用价值；一粒纽扣电池可使600吨水受到污染，相当于一个人一生的饮水量。",
  },
  {
    category: "垃圾分类",
    title: "电子垃圾的处理",
    content:
      "电子垃圾中含有大量的重金属和有害物质，如铅、汞、镉等。不正确的处理方式会导致这些物质进入土壤和水源，对环境和人体健康造成严重危害。",
  },
  {
    category: "垃圾分类",
    title: "衣物回收的意义",
    content:
      "全球每年产生约9200万吨纺织废料，其中只有不到1%被回收制成新衣物。回收旧衣物不仅可以减少垃圾填埋和焚烧，还能节约水资源和能源。",
  },

  // 节能减排类
  {
    category: "节能减排",
    title: "空调温度的设置",
    content:
      "夏季空调温度每调高1℃，可降低8%的电力负荷；冬季空调温度每调低1℃，可节约10%的能源。将空调设置在26℃左右，既能保证舒适度，又能节约能源。",
  },
  {
    category: "节能减排",
    title: "绿色出行的选择",
    content:
      "骑自行车或步行1公里，可以减少约0.2公斤的碳排放；乘坐公共交通出行1公里，可减少约0.1公斤的碳排放；相比之下，私家车每行驶1公里约排放0.27公斤的二氧化碳。",
  },
  {
    category: "节能减排",
    title: "LED灯的优势",
    content:
      "LED灯比传统白炽灯节能80%以上，寿命是白炽灯的10倍以上。如果全国使用12亿支LED灯，一年可节电858.48亿度，相当于节约标准煤3433.92万吨。",
  },
  {
    category: "节能减排",
    title: "节约用水的小窍门",
    content:
      "用洗菜水、淘米水浇花，可节约用水；缩短洗澡时间1分钟，可节约2-4升水；使用节水型马桶，每次可节约4-6升水。",
  },
  {
    category: "节能减排",
    title: "节约用电的习惯",
    content:
      "电器不用时拔掉插头，可避免待机耗电；电视机音量和亮度调至适中，可减少耗电量；使用节能型电器，如冰箱、洗衣机等，可降低能源消耗。",
  },

  // 自然保护类
  {
    category: "自然保护",
    title: "森林的作用",
    content:
      "森林是地球之肺，每公顷森林每天可吸收1吨二氧化碳，释放0.73吨氧气。全球森林面积正以每年约1300万公顷的速度减少，相当于每分钟消失20个足球场大小的森林。",
  },
  {
    category: "自然保护",
    title: "海洋塑料污染",
    content:
      "全球每年有超过800万吨塑料垃圾进入海洋，这些塑料需要数百年才能分解。海洋中的塑料垃圾会被鱼类和其他海洋生物误食，导致它们死亡或生病。",
  },
  {
    category: "自然保护",
    title: "生物多样性的重要性",
    content:
      "生物多样性是地球上生命经过几十亿年发展进化的结果，是人类赖以生存的物质基础。每消失一种植物，就会有10-30种依附于它的其他生物随之消失。",
  },
  {
    category: "自然保护",
    title: "湿地的功能",
    content:
      "湿地是地球之肾，具有净化水质、调节气候、防洪抗旱、保护生物多样性等多种功能。全球湿地面积正以每年约1%的速度减少，湿地保护迫在眉睫。",
  },
  {
    category: "自然保护",
    title: "气候变化的影响",
    content:
      "全球气候变暖导致冰川融化、海平面上升、极端天气事件增加等。如果不采取有效措施，到2100年，全球平均气温可能上升1.5-4.5℃，对人类生存和发展构成严重威胁。",
  },

  // 环保行动类
  {
    category: "环保行动",
    title: "减少一次性用品的使用",
    content:
      "全球每年约有5万亿个塑料袋被使用，其中只有不到5%被回收利用。减少使用一次性塑料袋、餐具、吸管等，可以有效减少塑料污染。",
  },
  {
    category: "环保行动",
    title: "绿色消费的选择",
    content:
      "购买有机食品、本地当季食品、可持续生产的产品等，可以减少农业生产中的化学农药和化肥使用，降低碳排放。",
  },
  {
    category: "环保行动",
    title: "植树造林的意义",
    content:
      "一棵树每年可以吸收约18公斤的二氧化碳，释放约12公斤的氧气。每个人每年种一棵树，全球每年可吸收约78亿吨的二氧化碳。",
  },
  {
    category: "环保行动",
    title: "参与环保志愿活动",
    content:
      "参加垃圾分类宣传、河流清理、植树造林等环保志愿活动，不仅可以为保护环境做出贡献，还能增强环保意识，带动更多人参与环保行动。",
  },
  {
    category: "环保行动",
    title: "支持环保组织",
    content:
      "通过捐款、志愿者服务等方式支持环保组织的工作，如世界自然基金会(WWF)、绿色和平组织(Greenpeace)、自然之友等，共同推动全球环境保护事业的发展。",
  },
];

// 当前显示的知识项
const currentKnowledgeItems = ref([]);

// 初始化省份数据
const provinceArr = ref([]);
const cityArr = ref([]);
const provinceId = ref(0);
const cityId = ref(0);
const address = ref("");

// 随机选择知识项
const selectRandomKnowledge = () => {
  const count = Math.min(3, ecoKnowledgeDatabase.length);
  const selected = [];
  const availableItems = [...ecoKnowledgeDatabase];

  for (let i = 0; i < count; i++) {
    if (availableItems.length === 0) break;

    const randomIndex = Math.floor(Math.random() * availableItems.length);
    selected.push(availableItems[randomIndex]);
    availableItems.splice(randomIndex, 1);
  }

  return selected;
};

// 打开环保知识弹窗并更新内容
const openEcoKnowledge = () => {
  currentKnowledgeItems.value = selectRandomKnowledge();
  showEcoKnowledge.value = true;
};

// 根据省份ID获取城市列表，使用params传递参数
const listGridCityByProvinceId = (provinceId) => {
  axios
    .get("gridCity/listGridCityByProvinceId", {
      params: { provinceId },
    })
    .then((response) => {
      cityArr.value = response.data || [];
      if (cityArr.value.length > 0) {
        cityId.value = cityArr.value[0].cityId;
      } else {
        cityId.value = 0;
      }
    })
    .catch((error) => {
      console.error(error);
    });
};

// 初始化省份数据及默认城市
const init = () => {
  axios
    .get("gridProvince/listGridProvinceAll")
    .then((response) => {
      provinceArr.value = response.data || [];
      if (provinceArr.value.length > 0) {
        provinceId.value = provinceArr.value[0].provinceId;
        listGridCityByProvinceId(provinceId.value);
      }
    })
    .catch((error) => {
      console.error(error);
    });
};
init();

// 省份变更时更新城市列表
const changeProvince = () => {
  if (provinceId.value) {
    listGridCityByProvinceId(provinceId.value);
  }
};

// 下一步操作
const next = () => {
  if (address.value.trim() === "") {
    alert("具体地址不能为空！");
    return;
  }
  router.push({
    path: "/selectAqi",
    query: {
      provinceId: provinceId.value,
      cityId: cityId.value,
      address: address.value,
    },
  });
};

// 跳转到反馈列表
const toFeedbackList = () => {
  router.push("/feedbackList");
};
</script>


<script>
export default {
  data() {
    return {
      supervisorForm: {
        telId: '',
        realName: '',
        birthday: '',
        sex: '1',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    isExist() {
      // 检查手机号是否存在的逻辑
    },
    register() {
      // 注册逻辑
    },
    goBack() {
      this.$router.push('/login') // 跳转到登录页路由
    }
  }
}
</script>

<style scoped>
/* 基础布局 - 与登录页统一 */
.wrapper {
  min-height: 100vh;
  background: url('../assets/hjbh.jpg') no-repeat center center / cover;
  font-family: 'PingFang SC', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-height: 100vh;
  max-width: 428px;
  margin: 0 auto;
  position: relative;
}

/* 头部区域 - 统一交互元素布局 */
.header-section {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.back-btn, .action-icon {
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}
.back-btn { left: 0; }
.action-icon { right: 0; }
.back-btn:hover, .action-icon:hover {
  background: rgba(0,0,0,0.2);
}
.back-btn i, .action-icon i {
  color: #333;
  font-size: 20px;
}
.page-title {
  font-size: 40px;
  font-weight: 600;
  margin: 0;

  color: #333;
  background: linear-gradient(135deg, #000000 0%, #e6e6e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
      1px 1px 1px rgba(255, 255, 255, 0.8),
      -1px -1px 1px rgba(0, 0, 0, 0.2);
}
.header-divider {
  width: 60px;
  height: 3px;
  background: #000;
  margin: 10px auto 0;
  border-radius: 3px;
}

/* 表单卡片 - 统一视觉风格 */
.form-card {
  width: 100%;
  max-width: 360px;
  background: rgba(255,255,255,0.9);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 40px;
}

/* 输入组 - 统一交互样式 */
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 8px;
}
.input-icon {
  color: #999;
  font-size: 16px;
  margin-right: 12px;
}
.form-control {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
  appearance: none;
  -webkit-appearance: none;
}

/* 操作按钮 - 统一交互反馈 */
.action-btn {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
  margin-top: 10px;
}
.action-btn:hover {
  background: #333;
}

/* 环保知识按钮样式 */
.eco-knowledge-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #009688;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

.eco-knowledge-btn:hover {
  transform: scale(1.05);
  background-color: #00796b;
}

.eco-knowledge-btn i {
  font-size: 20px;
}

/* 环保知识弹窗样式 */
.eco-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1;
  animation: fadeIn 0.3s ease-out;
}

.modal-header {
  padding: 16px 20px;
  background-color: #009688;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.close-btn:hover {
  opacity: 1;
}

.modal-body {
  padding: 20px;
  max-height: calc(80vh - 60px);
  overflow-y: auto;
}

.knowledge-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  animation: slideUp 0.5s ease-out;
}

.knowledge-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.knowledge-item h4 {
  color: #009688;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
}

.knowledge-item p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.tip-text {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  text-align: center;
}

.tip-text p {
  color: #999;
  font-size: 13px;
  margin: 0;
}

/* 弹窗动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 知识项滑入动画 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

